<template>
    <custom-page-box>
        <div class='need-manage-edit-other-container'>
            <div class='header'>
                <p>{{ formType | getFormName }}</p>
                <a-button @click='goBack' type="primary" class="w90">返回</a-button>
            </div>
            <town-service-need v-if="formType === 'townService'"></town-service-need>
            <houses-need v-if="formType === 'houses'"></houses-need>
            <plot-need v-if="formType === 'plot'"></plot-need>
            <product-need v-if="formType === 'product'"></product-need>
            <service-need v-if="formType === 'service'"></service-need>
            <talents-need v-if="formType === 'talents'"></talents-need>
        </div>
    </custom-page-box>
</template>

<script>
import TownServiceNeed from '@/components/need-manage/town-service'
import HousesNeed from '@/components/need-manage/houses'
import PlotNeed from '@/components/need-manage/plot'
import ProductNeed from '@/components/need-manage/product'
import ServiceNeed from '@/components/need-manage/service'
import TalentsNeed from '@/components/need-manage/talents'

export default {
    name: 'NeedManageNeed',
    components: {
        TownServiceNeed,
        HousesNeed,
        PlotNeed,
        ProductNeed,
        ServiceNeed,
        TalentsNeed
    },
    filters: {
        getFormName (type) {
            switch (type) {
            case 'townService':
                return '乡村服务需求'
            case 'houses':
                return '房屋需求'
            case 'plot':
                return '地块需求'
            case 'talents':
                return '人才需求'
            case 'product':
                return '农产品需求'
            case 'service':
                return '服务需求'
            }
        }
    },
    data () {
        return {}
    },
    computed: {
        formType () {
            return this.$route.params.type || 'townService'
        }
    },
    created () {

    },
    mounted () {

    },
    methods: {
        goBack () {
            this.$router.go(-1)
        }
    }
}
</script>

<style scoped lang='less'>
.need-manage-edit-other-container {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 6px;
    background-color: #fff;
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        padding: 0 20px;
        border-bottom: 1px solid #F3F3F3;
        p {
            font-size: 16px;
            line-height: 50px;
            color: #2A2A2A;
        }
    }
  ::v-deep{
    .form{
      width: 100%;
      padding: 30px 0 50px;
      .ant-form{
        width: 600px;
        .ant-col-5{
          width: 30%;
        }
        .ant-col-18{
          width: 70%;
        }
      }
      h2{
        position: relative;
        padding-left: 28px;
        border-bottom: 1px solid #F3F3F3;
        height: 42px;
        display: flex;
        align-items: center;
        &:before{
          content: '';
          display: block;
          width: 2px;
          height: 12px;
          background-color: #009944;
          position: absolute;
          left: 22px;
          top: 50%;
          transform: translate(-100%,-50%);
        }
      }
    }
    .next-btn{
      margin-left: 180px;
    }
    .next-btn,.next-btn+.ant-btn{
      background: #009944;
      border: none;
      color: #fff;
      border-radius: 2px;
    }
  }
}
.w90{
  width: 90px;
}
</style>
